<!--
 * @Description: 侧边组件
 * @Author: Kerwin
 * @Date: 2024-09-24 14:55:51
 * @LastEditTime: 2024-09-25 17:25:15
 * @LastEditors:  Please set LastEditors
-->
<template>
    <view class="sideBar" v-if="!props.isPreview">
        <view class="avatar">
            <u-image :src="getImgFullPath(
                item?.user?.avatar || configStore.cardDefualtAvatar
            )
                " width="80rpx" height="80rpx" shape="circle" @click="toBusinessCardHome(item, index)"></u-image>
            <u-image width="36rpx" height="36rpx" shape="circle" class="icon"
                src="https://image.blacksilverscore.com/uploads/2fdc2eed-dc7a-490e-8c11-17a4668ea375.png" v-if="!item?.focused && userInfo && item?.userId !== userInfo?.id
                    " @click="focusAdd(item)"></u-image>
        </view>
        <view class="action" @click="doLike(item)">
            <!-- <hy-svg style="opacity: 0.9;" :name="item?.favorited? 'icon-heart_active' : 'icon-heart'" width="66rpx" height="66rpx" /> -->
            <text class="iconfont hy-icon-yidianzan" :class="{ 'is-active': item?.favorited }"></text>
            <text class="num">{{ item?.favoriteCount }}</text>
        </view>
        <view class="action" @click="toComment(item)">
            <u-icon :name="icon_comment" size="50" style="display: block;opacity: 0.9;"></u-icon>
            <view>
                {{ item.commentCount }}
            </view>
        </view>
        <view class="action" @click="toShare(item)">
            <button open-type="share" class="shareBtn"></button>
            <text class="iconfont hy-icon-fenxiangzhuanfa" style="font-size: 60rpx"></text>
            {{ item.share }}
        </view>
    </view>
</template>
<script lang="ts" setup>
import { ref, computed } from 'vue'
import { getImgFullPath } from '@/utils'
import icon_comment from '@/static/comment.svg'
import { useUserStore, useConfigStore } from '@/store';
import { storeToRefs } from 'pinia'

const userStore = useUserStore()
const configStore = useConfigStore()
const { userInfo } = storeToRefs(userStore)

const props = defineProps({
    index: {
        type: Number,
        default: 0
    },
    item: {
        type: Object,
        default: () => ({})
    },
    isPreview: {
        type: Boolean,
        default: false
    }
})
const emits = defineEmits(['focusAdd', 'doLike', 'toBusinessCardHome', 'toComment', 'toShare'])
const doLike = (item: any) => {
    emits('doLike', item)
}
const toBusinessCardHome = (item: any, index: number) => {
    emits('toBusinessCardHome', item, index)
}
const toComment = (item: any) => {
    emits('toComment', item)
}
const toShare = (item: any) => {
    emits('toShare', item)
}
const focusAdd = (item: any) => {
    emits('focusAdd', item)
}
</script>

<style scoped lang="scss">
  .sideBar {
    position: absolute;
    right: 30rpx;
    top: 60%;
    transform: translateY(-50%);
    color: #fff;
    z-index: 1;

    .avatar {
      border: 2px solid #fff;
      border-radius: 50%;
      position: relative;
      width: 86rpx;
      height: 86rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-bottom: 40rpx;

      .icon {
        position: absolute;
        left: 50%;
        bottom: 0;
        color: red;
        z-index: 1;
        transform: translateX(-50%) translateY(40%);
      }
    }

    .action {
      display: flex;
      flex-direction: column;
      font-size: 20rpx;
      text-align: center;
      margin-top: 30rpx;
      position: relative;

      .iconfont {
        font-size: 70rpx;
        opacity: 0.85;
        text-shadow: rgba(0, 0, 0, 0.6) 1px 1px 0px;
      }

      .num {
        text-shadow: rgba(0, 0, 0, 0.6) 1px 1px 1px;
      }

      .hy-icon-yidianzan {
        &.is-active {
          animation: heartbeat 1s;
          color: red;
        }
      }

      .shareBtn {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
        z-index: 1;
      }

      @keyframes heartbeat {
        0% {
          transform: scale(1);
        }

        10% {
          transform: scale(1.25);
        }

        100% {
          transform: scale(1);
        }
      }
    }
  }
</style>